use crate::models::TodoItem;
//use gloo::console;
use crate::components::ItemButtonsContainerComponent;
use stylist::yew::styled_component;
use web_sys::wasm_bindgen::JsCast;
use web_sys::Event;
use yew::{classes, html, Callback, Html, Properties};

#[derive(Properties, Clone, PartialEq)]
pub struct TodoItemProps {
    pub data: TodoItem,
    pub on_status_changed: Callback<(String, bool)>,
    pub on_edit_click: Callback<String>,
}

#[styled_component]
pub fn TodoItemComponent(props: &TodoItemProps) -> Html {
    let handle_click = {
        let on_status_changed = props.on_status_changed.clone();
        let id = props.data.id.clone();
        Callback::from(move |e: Event| {
            if let Some(element) = e
                .target()
                .map(|item| item.dyn_into::<web_sys::HtmlInputElement>())
            {
                //console::log!("new status:{}", element.clone().expect("element").checked());
                let checked = element.expect("checked element").checked();
                on_status_changed.emit((id.clone(), checked))
            }
        })
    };
    let handle_edit = {
        let on_edit_click = props.on_edit_click.clone();
        let id = props.data.id.clone();
        Callback::from(move |_| on_edit_click.emit(id.clone()))
    };

    let should_render_button = !&props.data.finished;

    html! {
        <div class={classes!("w-100", "columns", "padding-small",css!(r#" "#))}>
            <div class="w-100 row content-start">
                {
                    if should_render_button {
                        html!{<button onclick={handle_edit}>{"编辑"}</button>}
                    } else {
                        html!{}
                    }
                }
            </div>
            <div class="w-100 row content-start">
                <div class={classes!(css!(r#"
                    .custom-checkbox {  
                      position: relative;  
                      display: inline-block;  
                      margin-right: 15px;  
                    }  
                      
                    .custom-checkbox input[type="checkbox"] {  
                      display: none;  
                    }  
                      
                    .custom-checkbox .checkbox-custom {  
                      display: inline-block;  
                      width: 20px;  
                      height: 20px;  
                      background-color: #fff;  
                      border: 2px solid #000;  
                      position: relative;  
                      border-radius: 5px;
                      cursor: pointer;  
                      -webkit-transition: all 0.3s ease;  
                      transition: all 0.3s ease;  
                    }  
                      
                    .custom-checkbox input[type="checkbox"]:checked + .checkbox-custom {  
                      background-color: #4CAF50;  
                      border-color: #4CAF50;  
                    }  
                      
                    .custom-checkbox input[type="checkbox"]:checked + .checkbox-custom::after {  
                      content: "";  
                      position: absolute;  
                      top: 7px;  
                      left: 7px;  
                      width: 7px;  
                      height: 7px;  
                      background-color: #fff;  
                      border-radius: 50%;  
                    }
                "#))}>
                    <label class="custom-checkbox">
                        <input
                            type="checkbox"
                            checked={props.data.finished}
                            onchange={handle_click }
                        />
                      <span class="checkbox-custom"></span>
                    </label>
                </div>
                <span>{ &props.data.title }</span>
            </div>
            <div class={classes!("w-100", css!(r#"
                height: 1px;  
                background-image: linear-gradient(to right,#8f7777, #d7e2d7);  
                "#))}></div>
            <div class={classes!("w-100", "row", "content-start", "align-center", "padding-small",css!(r#" "#))}>
                <div class={classes!(css!(r#"width:5px;height:5px;background-color:gray;"#))}>
                </div>
                <div class={classes!("padding-small",css!(r#" "#))}>
                  {&props.data.description}
                </div>
            </div>
        </div>
    }
}
